<template>
  <div class="common-bar-chart">
    <div class="chart-header">
      <div
          class="chart-title"
          @click="switchDataSet('tableCount')"
          :class="{ active: activeDataSet === 'tableCount' }"
      >
        表数量
      </div>
      <div
          class="chart-title"
          @click="switchDataSet('capacity')"
          :class="{ active: activeDataSet === 'capacity' }"
      >
        表容量
      </div>
    </div>
    <div class="chart-content">
      <BaseCharts
          ref="baseChartsRef"
          :options="chartOptions"
          :autoRander="autoRander"
          :autoNumber="autoNumber"
          :height="height"
      />
    </div>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";

const props = defineProps({
  labels: {type: Array, default: () => []},
  tableCounts: {type: Array, default: () => []},
  capacities: {type: Array, default: () => []},
  autoRander: {type: Boolean, default: false},
  autoNumber: {type: Number, default: 60},
  height: {type: String, default: "3.4rem"},
});

const activeDataSet = ref("tableCount"); // 当前显示的数据集

const chartOptions = computed(() => {
  const currentData = activeDataSet.value === "tableCount" ? props.tableCounts : props.capacities;
  const currentDataSetName = activeDataSet.value === "tableCount" ? "表数量" : "表容量(TB)";

  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: [currentDataSetName],
      left: "left",
      top: "top",
    },
    grid: {
      top: "15%", // 调整顶部空白
      right: "3%", // 调整右侧空白
      bottom: "10%", // 调整底部空白
      left: "3%", // 调整左侧空白
    },
    xAxis: {
      type: "category",
      data: props.labels,
      axisTick: {
        show: false // 隐藏刻度线
      },
      axisLine: {
        show: false // 隐藏轴线
      },
    },
    yAxis: {
      type: "value",
      position: "left",
      axisTick: {
        show: false // 隐藏刻度线
      },
      axisLine: {
        show: false // 隐藏轴线
      },
      splitLine: {show: false}, // 关闭刻度横线
    },
    series: [
      {
        name: currentDataSetName,
        type: "bar",
        data: currentData,
        barWidth: 20, // 调整柱状图条宽度
      },
    ],
  };
});

const switchDataSet = (dataSet) => {
  activeDataSet.value = dataSet;
};
</script>

<style scoped>
.common-bar-chart {
  width: 100%;
  background: #f5f5f5;
  border-radius: 0.1rem;

  .chart-header {
    display: flex;
    padding: 0.05rem;
    margin-top: 0.05rem;

    .chart-title {
      font-size: 0.16rem;
      color: #707987;
      cursor: pointer;
      text-align: center;
      padding: 0.05rem;
    }

    .chart-title.active {
      color: #175eff;
    }
  }

  .chart-content {
    padding: 0.05rem;
  }
}
</style>